<template>
  <div>
    <div class="user_z">
      <div
        class="user_left"
        :class="getBackgroundColor(userInfo.id) "
      >{{userInfo.name != undefined?userInfo.name.slice(0,1):''}}</div>
      <div class="user_right">
        <div class="user_right_name">{{userInfo.name}}</div>
        <div class="user_right_name">级别：{{positionName}}</div>
        <div>加盟时间：{{userInfo.addTime.substring(0,10)}}</div>
      </div>
    </div>
    <div class="settlement_top">
      <span>平台结算</span>
    </div>

    <van-row class="title">
      <van-col :span="item.span" v-for="(item, index) in titles" :key="index">{{item.title}}</van-col>
    </van-row>

    <van-row class="content_bot" v-for="(item, index) in dataList" :key="index">
      <van-col span="5">{{item.addTime.substring(0,10)}}</van-col>
      <van-col span="5">{{item.totalAmount}}</van-col>
      <van-col span="5">{{item.accountPeriod}}</van-col>
      <van-col span="5" v-show="item.deleted? deleted='已结算': deleted='未结算'">{{deleted}}</van-col>
      <van-col span="4" @click="toPathDetails">
        <!-- path: '/user/ModuleSettlement/details', -->
        <div></div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Row, Col, List, Image } from 'vant';
import { managerInfo, ttmallRecordList, ttmallRecordDetail } from '@/api/api';
// window.addEventListener(
//   'popstate',
//   function() {
//     console.log('小敏哥很帅！！！');
//   },
//   false
// );
export default {
  data() {
    return {
      deleted: '',
      titles: [
        {
          span: '5',
          title: '时间',
        },
        { span: '5', title: '金额' },
        { span: '5', title: '账期' },
        { span: '5', title: '状态' },
        { span: '4', title: '详情' },
      ],
      dataList: [],
      userInfo: {},
    };
  },
  created() {
    this.getUserInfo();
    this.getDataList();
  },
  // computed:{
  //   splitAddTime: function () {
  //     this.us
  //   }
  // },
  methods: {
    toPathDetails() {
      this.$router.push('/user/moduleSettlement/details');
    },

    getBackgroundColor(id) {
      return 'familynameColor' + (id % 10);
    },
    // 获取结算页面，用户信息
    getUserInfo() {
      managerInfo()
        .then((res) => {
          this.userInfo = res.data.data;
          this.positionName = res.data.data.positionName;
        })
        .catch((err) => {
          
        });
    },

    //获取用户结算记录数据
    getDataList() {
      ttmallRecordList()
        .then((res) => {
          this.dataList = res.data.data.list;
        })
        .catch((err) => {
          
        });
    },
  },
  components: {
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Image.name]: Image,
  },
};
</script>
<style scoped lang="scss">
.user_z {
  display: flex;
  width: 100%;
  height: 100px;
  padding: 16px;
  background-color: #fff;
  margin-bottom: 10px;
  .user_left {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 67px;
    height: 67px;
    border-radius: 50%;
    font-size: 30px;
    overflow: hidden;
  }
  .user_right {
    width: calc(100% - 77px);
    height: 30px;
    margin-left: 10px;
    font-family: '微软雅黑 Light';
    div:nth-child(1) {
      font-size: 18px;
      font-weight: 600;
    }
    div:nth-child(2) {
      color: rgba(157, 155, 155, 1);
      font-size: 14px;
      margin-top: 8px;
    }
    div:nth-child(3) {
      color: rgba(157, 155, 155, 1);
      font-size: 14px;
    }
  }
}
.settlement_top {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  width: 100%;
  background-color: #fff;
  font-family: '微软雅黑 Light';
  span {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
  }
  span::before {
    content: '';
    margin-right: 8px;
    height: 20px;
    width: 6px;
    background-color: #ee3f00;
  }
}

// 下半部内容标题区
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  // .van-col:nth-child(4) {
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   &::after {
  //     content: '';
  //     display: inline-block;
  //     width: 0;
  //     height: 0;
  //     border-left: 6px solid transparent;
  //     border-right: 6px solid transparent;
  //     border-top: 6px solid #000;
  //     margin-left: 3px;
  //     transform: translateY(25%);
  //   }
  // }
  // .van-col:nth-child(3) {
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   &::after {
  //     content: '';
  //     display: inline-block;
  //     width: 0;
  //     height: 0;
  //     border-left: 6px solid transparent;
  //     border-right: 6px solid transparent;
  //     border-top: 6px solid #000;
  //     margin-left: 5px;
  //     transform: translateY(25%);
  //   }
  // }
}
.content_bot {
  display: flex;
  align-items: center;
  text-align: center;
  height: 32px;
  color: rgba(157, 155, 155, 1);
  font-size: 12px;
  .van-col:nth-child(1) {
    word-wrap: break-word;
  }
  .van-col:nth-child(5) {
    display: flex;
    justify-content: center;
    align-items: center;
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #ee3f00;
    }
    div::after {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      transform: translateX(-12.5%) rotate(45deg);
      border-top: 2px solid #ffffff;
      border-right: 2px solid #ffffff;
    }
  }
}
.content_bot:nth-child(even) {
  background-color: #fff;
}

.familyname {
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 36px;
  text-align: center;
  border-radius: 7px;
}

.familynameColor1 {
  background-color: #129b91;
  color: #fff;
}

.familynameColor2 {
  background-color: #07bace;
  color: #fff;
}

.familynameColor3 {
  background-color: #e92c6c;
  color: #fff;
}

.familynameColor4 {
  background-color: #2996eb;
  color: #fff;
}

.familynameColor5 {
  background-color: #ffa619;
  color: #fff;
}

.familynameColor6 {
  background-color: #4eb55a;
  color: #fff;
}

.familynameColor7 {
  background-color: #724abd;
  color: #fff;
}

.familynameColor8 {
  background-color: #07bace;
  color: #fff;
}

.familynameColor9 {
  background-color: #e92c6c;
  color: #fff;
}

.familynameColor0 {
  background-color: #2996eb;
  color: #fff;
}
</style>